<%--
  Created by IntelliJ IDEA.
  User: Li Chuanwei
  Date: 2023-07-15
  Time: 20:20
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://wego.com/format" prefix="f" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加轮播图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/showBigImage.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css" media="all">
</head>
<body>

<div class="layuimini-container ">
    <div class="layuimini-main">
        <form class="layui-form layui-row layui-col-space16" action="">

            <%--轮播图编号--%>
            <input type="text" name="id" autocomplete="off" value="${carousel.id}" hidden>
            <%--轮播图名称--%>
            <div class="layui-form-item">
                <label class="layui-form-label">轮播图名称:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required" name="name"
                           autocomplete="off" class="layui-input" value="${carousel.name}" placeholder="请输入轮播图名称">
                </div>
            </div>

            <%--轮播图状态--%>
            <div class="layui-form-item">
                <label class="layui-form-label">轮播图状态:</label>
                <div class="layui-input-block">
                    <c:if test="${carousel.state==1}">
                        <input type="checkbox" lay-verify="required" value="1" name="state" lay-skin="tag" title="启用"
                               autocomplete="off"   checked>
                        <input type="checkbox" lay-verify="required" value="0" name="state" lay-skin="tag" title="停用"
                               autocomplete="off"  >
                    </c:if>

                    <c:if test="${carousel.state==0}">
                        <input type="checkbox" lay-verify="required"  value="1" name="state" lay-skin="tag" title="启用"
                               autocomplete="off"   >
                        <input type="checkbox" lay-verify="required"   value="0" name="state" lay-skin="tag" title="停用"
                               autocomplete="off" checked >
                    </c:if>

                    <c:if test="${carousel.state==null}">
                        <input type="checkbox"   name="state" value="1"  lay-skin="tag" title="启用"
                               autocomplete="off"   >
                        <input type="checkbox"   name="state" value="0" lay-skin="tag" title="停用"
                               autocomplete="off"  >
                    </c:if>

                </div>
            </div>

            <%--轮播图图片--%>
            <div class="layui-form-item ">
                <input type="text" id="carouselPicName" name="pic" autocomplete="off" hidden>
                <label class="layui-form-label">轮播图图片:</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" id="carouselPic-upload-btn">
                        <i class="layui-icon layui-icon-upload"></i> 单图片上传
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="carouselPic"
                                 style="width: 100%; height: 92px;">
                            <div id="ID-upload-demo-text"></div>
                        </div>
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes"
                             lay-filter="filter-demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>

            <%--超链接--%>
            <div class="layui-form-item">
                <label class="layui-form-label">超链接:</label>
                <div class="layui-input-block">
                    <input type="text" name="url"
                           autocomplete="off" class="layui-input" value="${carousel.url}" placeholder="请输入轮播图超链接">
                </div>
            </div>

            <%--备注信息--%>
            <div class="layui-form-item">
                <label class="layui-form-label">备注信息:</label>
                <div class="layui-input-block">
                    <input type="text" name="info"
                           autocomplete="off" class="layui-input" value="${carousel.info}" placeholder="请输入轮播图备注信息">
                </div>
           </div>

            <%--优先级--%>
            <div class="layui-form-item">
                <label class="layui-form-label">优先级:</label>
                <div class="layui-input-block">
                    <input type="number" name="priority"
                           autocomplete="off" class="layui-input" value="${carousel.priority}" lay-verify="required|number" placeholder="请输入轮播图展示优先级">
                </div>
            </div>

            <%--操作按钮--%>
            <div class="layui-form-item" style="padding-left: 1100px">
                <div class="layui-btn-container ">
                    <button type="reset" class="layui-btn layui-btn-normal layui-row-xs">
                        清空
                    </button>
                    <button id="carousel_submit" class="layui-btn layui-btn-danger layui-row-xs" lay-submit
                            lay-filter="carouselSubmit"> 提交
                    </button>
                </div>
            </div>

        </form>
    </div>
</div>
<script>

    layui.use(['form', 'table', 'element', 'layer'], function (message) {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        upload = layui.upload;
        element = layui.element;

        form.on('submit(carouselSubmit)', function (data) {
            var formData = data.field; // 获取表单数据
            $.ajax({
                url: '${pageContext.request.contextPath}/manager/carousel/addUpdate',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function (result) {
                    var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引
                    parent.layer.close(index); // 关闭当前 iframe 弹层
                },
                error: function () {
                }
            });
            return false;
        });

        // 单图片上传
        var uploadInst = upload.render({
            elem: '#carouselPic-upload-btn',
            url: '${pageContext.request.contextPath}/carousel/fileUpload',
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#carouselPic').attr('src', result); // 图片链接（base64）
                    //上传成功后将隐藏域的商品图片值设置为文件名
                    var carouselPicName = document.getElementById("carouselPicName");
                    carouselPicName.value = file.name;
                });
                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },

            done: function (res) {
                // 若上传失败
                if (res.code != 200) {
                    return layer.msg('上传失败');
                }
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('filter-demo', n + '%');
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
</script>
</body>
</html>
